<template>
	<scroll-view scroll-y="true" style="height: 100vh; " :scroll-into-view="scrollIntoViewId">
		<view class="content">
		<!-- 顶部导航栏 -->
			<!-- <NavBar
				:isLeft="true"
				:isRight="true"
				:ricon = "'more-filled'"
				:title = "'广州纯玩五大景区'"
				bgcolor="#FFFFFF"
				@onLeft="onLeftIcon"
			></NavBar> -->
			<view class="header">
				<image class="header-image" src="" mode="widthFix"></image>
				<view class="header-title">
					广州纯玩·四大AAAAA景区(广州长隆旅游度假区+广州塔+白云山风景名胜区+华南国家植物园三天两晚，一对一导游，全程陪伴
				</view>
				<view class="header-icons">
					<view class="icon">
						<u-icon name="calendar" color="#000" size="22"></u-icon>
					</view>
					<view class="icon">
						<u-icon name="bookmark" color="#000" size="20"></u-icon>
					</view>
					<view class="icon">
						<u-icon name="map" color="#000" size="20"></u-icon>
					</view>
				</view>
			</view>
		<!-- 主要内容区域 -->
			<view class="main-content">
				<u-sticky zIndex="999999">
					<!-- @click="scrollTo($event)" -->
					<u-tabs 
						:list="tabList"
						style="background-color: #FFFFFF;"
						:current="current"
						:activeStyle="{ color: '#000000',fontWeight:'bolder',fontSize:'34rpx' }"
						:inactiveStyle="{ color: '#000000',fontSize:'30rpx',}"
						lineColor="#FFFFFF"
						bgColor=""
						@click="scrollToPosition($event)"
						
					></u-tabs>
				</u-sticky>
				<!-- 特色介绍 -->
				<view id="features" class="section">
					<view class="feature-item" v-for="(feature, index) in features" :key="index">
						<view class="feature-title">
							<image :src="feature.image" class="feature-title-image" mode="widthFix"></image>
							<text class="feature-title-index">特色{{ index+1 }}：</text>
							<text>{{ feature.title }}</text>
						</view>
						<text class="feature-content">{{ feature.content }}</text>
					</view>
					<view class="features-small">
						为您打造有趣以及缤纷的景点路线，绝对让您对此次旅途满意，希望您在广州度过愉快的三天两晚~
					</view>
				</view>
				<image src="" class="product-image" mode="widthFix"></image>
				
				<!-- 行程安排 -->
				<view id="itinerary" class="itinerary">
					<u-sticky offset-top="40">
						<view class="section-tabs">
							<view class="tab" :class="curNow==index?'active':''" @click="onItineraryChange(index)" v-for="(item,index) in itineraryList">
								<view class="title">
									{{item.title}}
								</view>
								<view class="sub_title">
									{{item.sub_title}}
								</view>
							</view>
						</view>
					</u-sticky>
					<view :id="'day'+index" class="day" v-for="(item,index) in itineraryList">
						<view class="day-header">
							<view class="day-header-index">
								<view class="xh">
									0{{index+1}}
								</view>
							</view>
							<view class="title">
								{{item.sub_title}}
							</view>
						</view>
						<view class="day-content">
							<step :steps="item.steps" active-color="#2979ff" ></step>
						</view>
					</view>
		
				</view>
		
				<!-- 费用明细 -->
				<view id="fees" class="section">
					<view class="section-title">
						<u-icon class="section-title-icon"  name="rmb-circle-fill" color="#F2A430" size="30"></u-icon>
						费用明细
					</view>
					<view class="section-content" >
						<view class="section-content-title">
							【门票】
						</view>
						<view>
							DAY1:长隆野生动物园门票80元/人、森林小火车20元/人。<br>
							DAY2:白云山风景区索道上下山60元/人。<br>
							DAY3:植物园门票60元/人。
						</view>
						<view class="section-content-title">
							【餐饮】
						</view>
						<view>
							DAY1:熊猫餐厅用餐120元/人;晚餐在****50元/人。<br>
							DAY2:早餐酒店赠送，不吃不退;午餐广州塔附近的粤式小馆为100元/人;晚餐在****60元/人。<br>
							DAY3:早餐酒店赠送，不吃不退;午餐在地方小馆80元/人、晚餐前往小蛮腰食堂200元/人。
						</view>
						<view class="tip">
							注:可自行选择跟团用餐，或者是自由用餐。
						</view>
						<view class="section-content-title">
							【酒店】
						</view>
						<view>
							DAY 1:广州森林温泉酒店(大床房100元/间、标准间120元/间、家庭套房200元/间)。<br>
							广州全季温泉酒店***路(大床房120元/间、标准间140元/间、家庭套房260元/间)。<br>
						</view>
						<view class="tip">
							注:酒店可按需挑选，可自行预定或是通过导游预定(如您临时需调整升级特殊房型等，需提前和导游沟通)。
						</view>
						<view class="section-content-title">
							【用车】
						</view>
						<view>
							该旅程全程包车，7座商务车，参考车型:大通费用:每天100元/人，1.3以下儿童免费，60岁以上老人半价。
						</view>
						<view class="tip">
							注:可自行选择跟团用车，或者是自由出行。
						</view>
					</view>
				</view>
		
				<!-- 注意事项 -->
				<view id="notes" class="section">
					<view class="section-title">
						<u-icon class="section-title-icon"  name="error-circle" color="#FB553C" bold size="30"></u-icon>
						注意事项
					</view>
					<view class="section-content">
						购买详情以及行程注意，详见<text class="rule" @click="onRule">《平台条款》</text>及<text class="rule" @click="onRule">《旅游法》</text>相关条款。
					</view>
				</view>
			
				<view class="footer">
					<view class="footer-price">
						<view class="price-box">
							<u-icon class="image" name="rmb" color="#fff" size="22"></u-icon>
							<text class="price">500</text>/人
						</view>
						<view class="">
							<text class="button dz" @click="onChat">去定制</text>
							<text class="button gm" @click="onBuy">去购买</text>
						</view>
					</view>
				</view>
		
			</view>
		</view>
	</scroll-view>
	
</template>


<script>
	import NavBar from "@/components/common-nav/common-nav.vue" 
	import Step from "@/components/product/steppers.vue"
	import productJson from '@/product.json';
export default {
	components: {
		NavBar,
		Step
	},
	data(){
		return{
			current:0,
			tabList: [
				{ name: '特色', type:'features' }, 
				{ name: '行程', type:'itinerary' }, 
				{ name: '费用', type:'fees' }, 
				{ name: '注意事项', type:'notes'},
			],
			features: [],
			curNow:0,
			itineraryList: [],
			scrollIntoViewId:''
		}
	},
	onLoad() {
		this.getProduct()
	},
	methods: {
		scrollToPosition(item) {
			console.log(item.type);
			this.$nextTick(() => {
			    this.scrollIntoViewId = item.type;
			});
		},
		getProduct(){
			this.features = productJson.features
			this.itineraryList = productJson.itineraryList
		},
		// 返回
		onLeftIcon(){
			uni.navigateBack(
			);
		},
		// 滚动页面
		scrollTo(item) {
			let anchor = item.type
			this.$nextTick(() => { 
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + anchor).boundingClientRect(rect => {
					if (rect) {
						
						if (typeof window !== 'undefined') { // 浏览器环境
							// 获取目标元素的顶部位置
							let scrollTop = rect.top + window.pageYOffset - (anchor.includes("day")?200:100); // window.pageYOffset 是当前页面的滚动距离
							console.log('scrollTop',rect,window.pageYOffset,scrollTop);
							// 执行滚动操作
							uni.pageScrollTo({
								scrollTop: scrollTop, // 滚动到目标元素的顶部
								duration:500        // 动画时长（单位：ms）
							});
						} else { // App/小程序环境
							let scrollTop = rect.top - uni.getSystemInfoSync().windowHeight / 2; // 调整滚动距离
							console.log("scrollTop",rect,uni.getSystemInfoSync().windowHeight,scrollTop);
							// 执行滚动操作
							uni.pageScrollTo({
								scrollTop: scrollTop, // 滚动到目标元素的顶部
								duration:0        // 动画时长（单位：ms）
							});
						}
					} else {
						console.error('未找到目标元素');
					}
				}).exec();
			}); 
		},
		// 行程点击
		onItineraryChange(index){
			this.curNow = index;
			let item ={
				type:'day'+index
			}
			this.scrollToPosition(item)
		},
		// 规则页
		onRule(){
			uni.navigateTo({
				url: '/pages_sub/common/protocol/protocol',
			});
		},
		onChat(){
			uni.navigateTo({
				url: '/pages_sub/user/chat/chat',
			});
		},
		onBuy(){
			uni.navigateTo({
				url: '/pages_sub/order/create-order',
			});
		}
	}
}
</script>

<style lang="scss">
	::v-deep.u-subsection--button__bar{
		background-color: #D0EAF7;
	}
.content {
  // padding-top: 90rpx;
  background-color: #FFFFFF;
}
.product-image{
	width: 100%;
	margin-bottom: 15rpx;
}
.header {
	width: 100%;
	background-color: #FFFFFF;
	.header-title{
		font-weight: bold;
		font-size: 40rpx;
		padding: 20rpx;
	}
	.header-icons{
		display: flex;
		padding: 20rpx;
		font-size: 24rpx;
		color: #999;
		align-items: center;
		.icon{
			display: flex;
			align-items: center;
			margin-right: 50rpx;
			.icon-image{
				width: 24rpx;
				margin-right: 10rpx;
			}
		}
	}
	.header-image{
		width: 100%;
	}
}

.main-content {
	width: 100%;
	max-width: 800px;
	background-color: #F1F1F1;
}

.section {
  margin-bottom: 20rpx;
  background-color: #FFFFFF;
  padding: 20rpx 0;
}
.section-tabs{
	padding: 20rpx;
	display: flex;
	// flex-wrap: wrap;
	background-color: #FFFFFF;
	
	
	width: calc(100% - 40rpx);
	overflow: scroll;
	.tab{
		border-radius: 8rpx;
		padding: 15rpx;
		text-align: center;
		display: inline-block;
		width: 300rpx;
		background-color: #F4F4F4;
		margin-right: 20rpx;
		.sub_title{
			font-size: 25rpx;
			margin-top: 5rpx;
		}
	}
	.active{
		background-color: #D0EAF7;
		color:#0D95DB;
		font-weight: bold;
	}
}
// 特色
#features{
	padding: 20rpx;
	margin-bottom: 0;
}
.feature-item {
	margin-bottom: 20rpx;
	.feature-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
		.feature-title-index{
			color: #FD8F01;
			font-weight: bold;
		}
		.feature-title-image {
			width: 30rpx;
			object-fit: cover;
			margin-right: 10rpx;
		}
	}
	.feature-content {
		font-size: 24rpx;
		line-height: 1.5;
		color: #898989;
	}
	
}
.features-small{
	font-size: 20rpx;
	font-weight: bold;
}











// 行程
.itinerary{
	background-color: #F1F1F1;
}
.day {
  margin-bottom: 10px;
  padding: 20rpx;
  background-color: #FFFFFF;
}

.day-header {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	.day-header-index{
		width: 100rpx;
		height: 80rpx;
		background-image: url(@/static/product/AY.png);
		background-size: 100% 100%;
		position: relative;
		.xh{
			position: absolute;
			bottom: -10rpx;
			right: 0;
			font-size: 50rpx;
		}
		
	}
	.title{
		font-size: 40rpx;
		margin-left: 20rpx;
	}
	
}

#fees{
	
}
// 費用明細

.section-title {
	font-size: 18px;
	font-weight: bold;
	margin: 40rpx;
	display: flex;
	align-items: center;
	.section-title-icon{
		width: 60rpx;
		margin-right: 20rpx;
	}
}
.section-content{
	color: #5E5C5D;
	line-height: 50rpx;
	box-shadow: 0rpx 5rpx 15rpx #ccc;
	margin:20rpx;
	padding: 20rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	view{
		margin-left: 20rpx;
		letter-spacing: 2rpx;
	}
	.section-content-title{
		font-weight: bold;
		color: #000000;
		margin-top: 50rpx;
		margin-left: 0;
	}
	.tip{
		font-weight: 700;
		color: #000000;
		font-size: 26rpx;
	}
	.rule{
		color: #1196DB;
	}
}



.footer{
	position: fixed;
	bottom: 20rpx;
	left: 0rpx;
	width:calc(100% - 110rpx);
	z-index: 999;
	.footer-price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #494748;
		position: relative;
		bottom: 20rpx;
		margin: 0 20rpx;
		border-radius: 30rpx;
		color: #FFFFFF;
		width: 100%;
		padding-left: 70rpx;
		height: 80rpx;
		.price-box{
			display: flex;
			align-items: center;
		}
		.price{
			font-size: 50rpx;
			margin-left: 10rpx;
		}
		.button {
			padding: 10px 20px;
			width: 120rpx;
			position: absolute;
			top: 0;
			bottom: 0;
		}
		.dz{
			background-color: #FE8F01;
			right: 160rpx;
			
		}
		.gm{
			background-color: #1196DB;
			position: absolute;
			right: 0;
			border-top-right-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
		}
	}
	
	.footer-price text {
	  font-size: 16px;
	}
}


</style>

